<template>
	<view>
		
		<view class="page-content">
			
			<view class="swiper_box">
				<swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="500">
					<swiper-item v-for="(item, i) in banner" :key="i" @click="toDetail(item.goods_id)">
						<image :src="item.path"></image>
					</swiper-item>
				</swiper>
			</view>
			
			<view class="index_mark">
				<image src="https://tianliyx.oss-cn-shanghai.aliyuncs.com/miniprogram/61ab1a3fae8bf.png"></image>
			</view>

			<view class="index_category">
				<view class="item" v-for="item in category" @click="toCate(item.category_id)">
					<image :src="item.file_path"></image>
					<view class="category_name">{{ item.name }}</view>
				</view>
				<view class="item"  @click="toCate(0)">
					<image src="https://tianliyx.oss-cn-shanghai.aliyuncs.com/miniprogram/static/more.png"></image>
					<view class="category_name">更多</view>
				</view>
			</view>


			<view class="index_goods">
				<view class="goods_list left">
					<view v-for="(item, i) in goods">
						<view class="goods_item" v-if="i % 2 == 0" @click="toDetail(item.goods_id)">
							<image :src="item.file_path"></image>
							<view class="c_fix" v-if="item.stock_total == 0">
								<text>已售罄</text>
							</view>
							<view class="goods_msg">
								<view class="goods_title">{{item.goods_name}}</view>
								<view class="goods_hot">{{item.selling_point}}</view>
								<view class="goods_spin">销量：{{item.sales}}</view>
								<view class="goods_pirce">
									<text class="sale_pirce">￥{{item.goods_price_min}}</text>
									<text class="line_pirce">￥{{item.line_price_min}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="goods_list right">
					<view v-for="(item, i) in goods">
						<view class="goods_item" v-if="i % 2 == 1"  @click="toDetail(item.goods_id)">
							<image :src="item.file_path"></image>
							<view class="c_fix" v-if="item.stock_total == 0">
								<text>已售罄</text>
							</view>
							<view class="goods_msg">
								<view class="goods_title">{{item.goods_name}}</view>
								<view class="goods_hot">{{item.selling_point}}</view>
								<view class="goods_spin">销量：{{item.sales}}</view>
								<view class="goods_pirce">
									<text class="sale_pirce">￥{{item.goods_price_min}}</text>
									<text class="line_pirce">￥{{item.line_price_min}}</text>
								</view>
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	import {
		get_index
	} from "@/api/index.js"
	import {
		COMMON
	} from "@/utils/commom.js"
	import {
		useAuthStore
	} from '@/stores/user.js';
	
	const authStore = useAuthStore();
	
	const banner = ref();
	const category = ref();
	const goods = ref();
	
	const p = ref(1);
	
	
	onLoad(() =>{
		index(p.value);
	})
		
	onShow(() => {
		authStore.initialize();
		if (authStore.isLogin) {
			COMMON.get_cart_count();
		}
	});

	// 监听下拉刷新事件
	onPullDownRefresh(() => {
		p.value = 1; // 重置页码
		index(p.value);
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	});

	// 监听上拉加载事件
	onReachBottom(() => {
		p.value++;
		get_index(p.value).then(res => {
			let data = res.data;
			goods.value = goods.value.concat(data.goods);

		})
	});

	// 首页数据
	function index(p) {
		get_index(p).then(res => {
			let data = res.data;
			banner.value = data.banner;
			category.value = data.category;
			goods.value = data.goods;
		})
	}
	
	// 跳转商品详情
	function toDetail(goods_id){
		uni.navigateTo({
		    url: `/pages/goods/detail?goods_id=${goods_id}`
		});
	}
	
	function toCate(category_id) {
		uni.setStorageSync("category_id", category_id)
		uni.switchTab({
			url: '/pages/category/index'
		})
	}
	
	// 分享到聊天
	onShareAppMessage(() =>{
		return {
			title: "商城小程序，不仅是满意而是惊喜",
			path: "/pages/index/index"
		}
	})
	
	// 分享到朋友圈
	onShareTimeline(() =>{
		return {
			title: "商城小程序，不仅是满意而是惊喜",
			path: "/pages/index/index",
			success(res) {
				uni.showToast({
					title: '分享成功'
				})
			}
		}
	})
</script>

<style lang="scss">
	page {
		background-color: #fff !important;
	}

	/* 自定义导航栏样式 */
	.custom-nav-bar {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		padding: 0 20rpx;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
		z-index: 1000;

		.index_logo {
			width: 500rpx;
			float: left;
		}
	}


	/* 页面内容样式 */
	.page-content {
		
		padding: 20px 10px;
		padding-top: 0;
		overflow: hidden;
		overflow-y: auto;
		background-color: #f8f8f8;
		.swiper_box {
			width: 100%;
			height: 300rpx;
			overflow: hidden;
			border-radius: 5px;
		
			swiper {
				width: 100%;
				height: 100%;
		
				image {
					width: 100%;
					height: 100%;
					display: block;
					border-radius: 5px;
				}
		
			}
		}

		.index_mark {
			width: 100%;
			padding: 10px 0;

			image {
				width: 100%;
				height: 48rpx;
			}
		}


		.index_category {
			width: 100%;
			overflow: hidden;
			display: flex;
			background-color: #fff;
			border-radius: 5px;
			padding: 10px 0;

			.item {
				flex: 1;
				text-align: center;

				image {
					width: 110rpx;
					height: 110rpx;
					border-radius: 100%;
					margin: auto;
					margin-bottom: 10rpx;
				}

				.category_name {
					font-size: 26rpx;
					color: #666;
				}
			}
		}


		.index_goods {
			width: 100%;
			margin: auto;
			padding: 20rpx 0;

			.goods_list {
				width: 49%;
				overflow: hidden;

			}

			.left {
				float: left;
			}

			.right {
				float: right;
			}

			.goods_item {
				background-color: #fff;
				border-radius: 5px;
				overflow: hidden;
				margin-bottom: 20rpx;
				position: relative;

				image {
					width: 350rpx;
					height: 350rpx;
					border-radius: 5px;
				}

				.c_type {
					position: absolute;
					top: 0;
					right: 0;
					z-index: 10;
					width: 200rpx;
					padding: 3px 0;
					background: #a771ff;
					font-size: 30rpx;
					text-align: center;
					color: #ffffff;
					-webkit-transform: rotate(45deg);
					transform: rotate(45deg);
					-webkit-transform-origin: 100rpx 100rpx;
					transform-origin: 100rpx 100rpx;
				}

				.goods_msg {
					padding: 10rpx;

					.goods_title {
						font-size: 28rpx;
						color: #333;
						font-weight: 400;
					}

					.goods_hot {
						font-size: 24rpx;
						color: #ff7500;
						padding: 10rpx 0;
					}

					.goods_spin {
						font-size: 24rpx;
						color: #666;
						padding: 10rpx 0;
					}

					.goods_pirce {
						padding: 10rpx 0;

						.sale_pirce {
							font-size: 30rpx;
							color: #F00;
							font-weight: 600;
						}

						.line_pirce {
							font-size: 24rpx;
							color: #999;
							text-decoration: line-through;
							padding-left: 20rpx;
						}
					}
				}
			}

			.c_fix {
				width: 350rpx;
				height: 350rpx;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 100;
				background: rgba(0, 0, 0, .3);

				text {
					width: 200rpx;
					height: 200rpx;
					display: block;
					margin: auto;
					z-index: 101;
					border-radius: 100%;
					text-align: center;
					color: #fff;
					line-height: 180rpx;
					font-size: 40rpx;
					margin-top: 70rpx;
				}
			}
		}

	}
</style>